<template>
  <div>
    <!-- 列表-- spu -->
    <div>
      <el-button type="primary" :icon="Plus" @click="goAddSpuForm" class="md-10" :disabled="!categoryStore.category3Id"
        >添加SPU</el-button
      >

      <el-table border :data="spuInfoList" class="md-10">
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作" width="240">
          <template #default="{ row, $index }">
            <el-button type="success" :icon="Plus" size="small" @click="goAddSkuForm(row)" title="新增sku"></el-button>
            <el-button type="warning" :icon="Edit" size="small" title="修改SPU" @click="revampSpuInfo(row)"></el-button>
            <el-button type="info" :icon="Message" size="small" title="查看SKU列表" @click="isShowDialog(row)"> </el-button>
            <!-- @confirm="deleteconfirm(row)" -->
            <el-popconfirm :title="`确定要删除${row.spuName}吗?`" placement="top" @confirm="deleteconfirm(row)">
              <template #reference>
                <el-button type="danger" size="small" :icon="Delete" title="删除SPU"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 6, 9]"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- dialog对话框 -->
      <!--  -->
      <el-dialog v-model="dialogTableVisible" :title="`${spu?.spuName}的SKU列表`" width="80%">
        <!-- :data="gridData"
              v-loading="true"
        -->
        <el-table :data="skuList">
          <el-table-column property="skuName" label="名称" />
          <el-table-column property="price" label="价格" />
          <el-table-column property="weight" label="重量" />
          <el-table-column property="skuDefaultImg" label="默认图片">
            <template #default="{ row }">
              <el-image :src="row.skuDefaultImg" style="width: 60px; height: 60px"></el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入 图标
import { Delete, Edit, Plus, Message } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
// 导入 spu 相关的 api请求
import { getSpuInfo, deleteSpu } from '@/api/spu'
import { findBySpuId } from '@/api/sku'
// 导入 spu 相关的 类型规范
import type { SpuInfoDataModel, SpuInfoListModel } from '@/api/spu'
import type { SpuInfoModel as SkuModel } from '@/api/sku'
// 导入useCategoryStore仓库
import useCategoryStore from '@/stores/categoryStore'

// 导入pubsub-js
import Pubsub from 'pubsub-js'

// 导入暴露的枚举对象
import { STATUS } from '../../index.vue'
// 获取仓库实例
const categoryStore = useCategoryStore()

// 声明一个状态
// 用来控制新增和展示的组件切换
// const isShow = ref(true)
const emits = defineEmits<{
  (e: 'update:modelValue', statusValue: number): void
  (ee: 'TransMitSpuInfo', spu: SpuInfoListModel): void
}>()

// 点击添加spu去切换到新增spu页面
const goAddSpuForm = () => {
  // 由父组件将传递一个自定义事件,修改 STATUS 中的状态
  // 调用
  emits('update:modelValue', STATUS.SPUFORM)
}

// 点击button按钮的 新增 sku 切换到skuform 页面
const goAddSkuForm = (row) => {
  // 调用
  emits('update:modelValue', STATUS.SKUFORM)
  emits('TransMitSpuInfo', row)
}

// 定义总数据 -(总条目数)
const total = ref(0)

// 定义当前页数
const currentPage = ref(1)

// 定义每页显示多少条数据
const pageSize = ref(3)

// 存储数据
const spuInfoList = ref<SpuInfoListModel[]>([])

// 当每页展示的数据发生变化的时候触发
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)

  // 修改当前每页展示的数据
  pageSize.value = val
  // 从新发送请求,并将最新值传递进行重新发送请求
  getSpuInfoList()
}
// 当页码发生改变时触发
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  // 修改当前页码的数据
  currentPage.value = val
  // 从新发送请求,并将最新值传递进行重新发送请求
  getSpuInfoList()
}
// 声明一个函数用来发送请求 -- (获取分页器展示数据)
const getSpuInfoList = async () => {
  // 发送请求
  try {
    // 从 categoryStore 仓库种取出对应的三级分类数据ld
    const { category3Id } = categoryStore
    const res = await getSpuInfo(currentPage.value, pageSize.value, category3Id as number)
    // console.log(res) // 测试
    if (res.code === 200) {
      // 存储 表格需要展示的数据
      spuInfoList.value = res.data.records
      // 更新接口返回的总数据
      total.value = res.data.total
    }
  } catch (error) {
    ElMessage.error('获取分页数据失败,请重试')
  }
}

// -----------------------------------------------------  下面为修改SPU逻辑
// 点击修改SPU按钮
const revampSpuInfo = (row: SpuInfoListModel) => {
  // 跳转到SPU页面
  // console.log(row)

  // 因为添加和修改使用的都是同一个页面,所有可以一起使用
  goAddSpuForm()
  // 进行数据回显 -- 使用pubsub-js给spuFrom组件传递当前点击的 row数据
  emits('TransMitSpuInfo', row)
  // Pubsub.publish('TransMitSpuInfo', row)
  // 发送请求,调用api
}

// -----------------------------------------------------  下面为删除SPU逻辑
// 点击删除SPU按钮
const deleteconfirm = async (row: SpuInfoListModel) => {
  // console.log(row)
  // 调用接口
  try {
    const res = await deleteSpu(row.id!)
    // console.log(res)
    if (res.code === 200) {
      // 提示
      ElMessage.success('删除成功')
      // 重新请求列表数据
      getSpuInfoList()
    }
  } catch (error) {
    ElMessage.error('删除失败,请重试')
  }
}

// ------------------------------------------------------ 下面为查看SPU列表逻辑
// 声明一个状态,用来显示diaiog对话框的显示和隐藏
const dialogTableVisible = ref(false)

// 声明一个变量,存储SKU列表数据
const skuList = ref<SkuModel[]>([])

// 声明一个变量,存储 row
const spu = ref<SpuInfoListModel>()
// 声明一个变量,用于展示图片
const img = ref('')
// 点击查看SKU按钮回调函数
const isShowDialog = async (row: SpuInfoListModel) => {
  // 首先将显示的状态取反
  // 使其显示出对话框
  dialogTableVisible.value = !dialogTableVisible.value
  // console.log(row)
  // 发送请求
  try {
    const res = await findBySpuId(row.id!)
    // 用于展示SPU名称
    spu.value = row
    const Img = res.data?.map((item) => {
      return item.skuDefaultImg
    })
    if (res.code === 200) {
      skuList.value = res.data!
    }
  } catch (error) {
    // 提示
    ElMessage.error('获取SKU列表失败,请重试')
  }
}

// 监听
watch(
  () => categoryStore.category3Id,
  (newVal) => {
    if (newVal) {
      // console.log('监听')
      // 当监听到了以后, 调用 函数来发送请求
      getSpuInfoList()
    } else {
      // 当三级分类id没有值的情况下
      // 需要清除展示的数据
      spuInfoList.value = []
    }
  },
  { deep: true, immediate: true }
)
</script>

<style scoped></style>
